<template>
  <div class="app">
    <a-card class="top">
      <a-row style="margin-bottom:10px">
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="图案编号">
              <a-input
                placeholder="请输入图案编号"
                v-model="patternCode"
                allow-clear
              ></a-input>
            </a-form-item>
            <a-form-item label="图案名称">
              <a-input
                placeholder="请输入图案名称"
                v-model="patternName"
                allow-clear
              ></a-input>
            </a-form-item>
             <a-form-item label="品牌">
                <a-select style="width: 180px" placeholder="请选择品牌" @change="selectBrand" v-model="brand" allow-clear>
                  <!-- <a-spin v-if="fetching" slot="notFoundContent" size="small" /> -->
                  <a-select-option :value="item.value" v-for="item in brandList" :key="item.code">
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
               <a-form-item label="货季">
                <a-select style="width: 180px" placeholder="请选择货季" @change="selectSeason" v-model="season" allow-clear>
                  <!-- <a-spin v-if="fetching" slot="notFoundContent" size="small" /> -->
                  <a-select-option :value="item.value" v-for="item in seasons" :key="item.code">
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
              <a-button
                type="primary"
                @click="resetForm"
                style="margin-left:10px"
              >重置</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <div style="margin-top:20px">
      <a-menu
        v-model="examineStatus"
        mode="horizontal"
        id="pattern"
      >
        <a-menu-item
          key="wait"
          @click="getList(0,8)"
        >待批注{{count1}} </a-menu-item>
        <a-menu-item
          key="pass"
          @click="getList(10,8)"
        >已批未备注{{count2}} </a-menu-item>
        <a-menu-item
          key="nopass"
          @click="getList(20,8)"
        >已批已备注{{count3}} </a-menu-item>
      </a-menu>
    </div>

    <a-spin :spinning="spinning">
     <div
        class="left-button"
        @click="last"
        v-show="current >=2"
      >
        <a-icon
          type="left"
          class="icon"
        />
      </div>
      <div
        v-show="showAll"
        style="width:90%;margin:auto;background: #fff;padding: 10px 10px 0;"
      >
        {{current}} / {{total}} {{patternList.code}}
      </div>
      <div
        v-show="showAll"
        style="display: flex;flex-direction: column;width:90%;margin:auto;"
      >
        <div id="imgs">
          <div class="left">
            <div style="background:#fff;">
              <div style="border-bottom: 1px solid #e8e8e8; 
               width: 100%;padding:10px 0;">
                <a-carousel
                  arrows
                  :infinite="false"
                  ref="varousel"
                  id="ant-carousel"
                  class="exam"
                >
                  <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;z-index:100">
                    <a-icon type="left-circle" />
                  </div>
                  <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                    <a-icon type="right-circle" />
                  </div>
                  <div
                    v-for="(item, index) in colorList"
                    :key="`${index}`"
                  >
                    <div style="text-align: right;padding: 0 20px 5px;">{{index+1}}/{{colorLength}}</div>
                    <div style="display:flex;justify-content: space-between; align-items: center; background:#fafafa; width: 100%;padding:10px 0;">
                      <!-- <div
                        @click="goLeft(index)"
                        id="imgicon"
                        v-if="index!=0"
                        style="margin-right:-30px"
                      >
                        <a-icon type="left-circle" />
                      </div> -->
                    
                      <img
                         @click="bigImg(index)"
                        style="-webkit-touch-callout: none; "
                        :style="{width: '100%',height: '360px',objectFit: 'scale-down',padding:'0 40px'}"
                         onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                        :src="item.images.length ? item.images[0].url :'https://img.bzhz.jnbygroup.com/cloth.png'"
                      />
                      <!-- <div
                        @click="goRight(index)"
                        id="imgicon"
                        v-if="index!=colorLength-1"
                        style="margin-left:-30px"
                      >
                        <a-icon type="right-circle" />
                      </div> -->
                    </div>
                  </div>
                </a-carousel>

              </div>

              <div id="patternText">
                <p>图案名称: {{patternList.name}}</p>
                <p>平面设计师:{{patternList.designerUserName}}</p>
                <p>货季:{{patternList.season}}</p>
                <p>描述: {{patternList.remarks}}</p>
                <p>含义: {{patternList.meaning}}</p>
                <p v-if="patternList.source ==1">来源: 原创</p>
                <p v-if="patternList.source ==2">来源: 借鉴</p>
                <p v-if="patternList.source ==3">来源: 出处</p>
                <p>是否有英文: {{whetherHasEnglish}}</p>
                <p v-if="whetherHasEnglish == '是'">英文原文: {{patternList.englishOriginal}}</p>
                <p v-if="whetherHasEnglish == '是'">英文解释: {{patternList.englishExplain}}</p>
                <p>是否有敏感风险: {{riskFlag}}</p>
                <div
                  v-if="riskFlag == '是'"
                  style="display:flex"
                >敏感风险: <p
                    v-for="(item,index) in risks"
                    :key="index"
                    style="margin-left:5px"
                  >{{item.title}}</p>
                </div>
              </div>
            </div>

          </div>
          <div class="right">
            <a-list
              item-layout="horizontal"
              :data-source="elementList"
            >
              <a-list-item
                slot="renderItem"
                slot-scope="item"
                class="item"
              >
                <div style="width:50%;height:120px;background:#fff;padding:5px 0;">
                  <img
                    :src="item.url ? item.url : 'https://img.bzhz.jnbygroup.com/cloth.png'"
                    :alt="item.id"
                    style="cursor:pointer"
                    onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                    @click="prevElementImg(item.url)"
                  />
                </div>
                <div class="content">
                  <p>元素名称: {{item.name}}</p>
                  <!-- <p>分类名称:{{item.categoryName}}</p> -->
                  <p>描述: {{item.description}}</p>
                </div>
              </a-list-item>
            </a-list>
          </div>
        </div>
      </div>
      <div
        v-show="showAll && key==20"
        style="width:40%;margin: 10px auto;background:#fafafa;padding:10px"
      >
        批注: {{showExamineRemark}}
      </div>
      <a-modal
        title="批注"
        :visible="visible"
        @ok="pass('20')"
        @cancel="handleCancel"
      >
        <a-textarea
          placeholder="请输入批注"
          allow-clear
          v-model="examineRemark"
        />
      </a-modal>
      <div style="margin: 10px auto;display:flex;justify-content: center;">
        <div
          v-show="key!=20 &&showAll"
          id="button"
          style="color: #ff4d4f;border:1px solid #ff4d4f"
          @click="showModal()"
        >
          批注
        </div>
        <div
          v-show="key!=10 &&showAll"
          id="button"
          style="color: #409eff;border:1px solid #409eff;"
          @click="pass('10')"
        >
          通过
        </div>
      </div>

      <div
        class="right-button"
        v-if="showButton"
        @click="next"
      >
        <a-icon
          type="right"
          class="icon"
        />
      </div>
    </a-spin>
    <BigImg :visibleImgs="visibleImgs" :imgList="imgList" :goToIndex="goToIndex" @closeBig="closeBig"></BigImg>

  </div>

</template>
<script>
import { listMixin } from './listMixin'

import BigImg from '@/views/box/components/UserMsg/bigImg'
export default {
  mixins: [listMixin],
  components: {
    BigImg
  },
  data() {
    return {
      examineStatus: ['wait'],
      currentIndex: '',
      count1: 0,
      count2: 0,
      brandList: [],
      seasons: [],
      count3: 0,
      imgList:[],
      visibleImgs:false,
      goToIndex: 0,
    }
  },
  methods: {
    goLeft(index) {
      console.log(222);
      this.currentIndex = index
      this.$refs['varousel'].goTo(index - 1)
    },
    goRight(index) {
      console.log(111);
      this.currentIndex = index
      this.$refs['varousel'].goTo(index + 1)
    },
    closeBig(value) {
      this.visibleImgs = value
      setTimeout(() => {
        this.imgList = []
      }, 200)
    },
  }
}
</script>
<style scoped>
.top {
  background: #fafafa;
  border: 3px solid #fff;
}
.app {
  display: flex;
  flex-direction: column;
}
.exam /deep/.slick-disabled{
color: transparent!important;
}

.app .left-button {
  width: 50px;
  height: 50px;
  cursor: pointer;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  top: 45%;

  background: #fafafa;
  margin-left: -5px;
}
.app .left-button .icon {
  font-size: 24px;
  color: #bfbfbf;
}
.app .left-button:hover .icon {
  color: #08c;
}
.app .right-button .icon {
  font-size: 24px;
  color: #bfbfbf;
}
.app .right-button:hover .icon {
  color: #08c;
}
.app .right-button {
  width: 50px;
  height: 50px;
  cursor: pointer;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  top: 45%;
  right: 6px;
  background: #fafafa;
}

#imgs {
  border: 10px solid #fff;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  margin: auto;
}
#imgs .left {
  width: 49.5%;
  height: 100%;
  object-fit: scale-down;
}
#imgs .left img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
#patternText {
  padding: 10px 20px;
}
#patternText p {
  margin-bottom: 5px;
}
#imgs .right {
  display: flex;
  width: 49.5%;
  flex-direction: column;
}
#imgs .right .item {
  display: flex;
  background-color: #fafafa;
  justify-content: space-between;
  padding: 10px;
  margin-bottom: 5px;
  border: 3px solid #fff;
}
#imgs .right .item .content {
  width: 48%;
  margin-left: 2%;
}
#imgs .right .item .content p {
  font-weight: 500;
  word-break: break-all;
}
#imgs .right img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
#button {
  margin: 0px 20px;
  text-align: center;
  width: 100px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
}
#button:hover {
  cursor: pointer;
  background: aliceblue;
}
#skc {
  border-bottom: 10px solid #fff;
  border-left: 10px solid #fff;
  border-right: 10px solid #fff;
  width: 100%;
  margin: auto;
}
#skc p {
  text-align: center;
  font-size: 21px;
  margin: 5px auto;
}

#skc .skcImgs img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.ant-list-item {
  border: none;
}

.previmg {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.previmg img {
  width: 500px;
}
.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: rgba(31, 45, 61, 0.9);
  /* background-color: rgba(31, 45, 61, 0.5); */
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.ant-menu-horizontal > .ant-menu-item,
.ant-menu-horizontal > .ant-menu-submenu {
  background: #fafafa;
  width: 150px;
  border-radius: 10px;
  text-align: center;
}
.ant-menu {
  background: transparent;
}
.ant-menu-horizontal {
  border-bottom: none;
}
.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  background: #faebd770;
}
#pattern {
  padding-bottom: 12px;
  width: 60%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
#imgicon {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: rgba(31, 45, 61, 0.9);
  opacity: 0.3;
  z-index: 1000;
}
</style>

